<template>
  <div class="m-4">
    <BasicForm @register="register" @submit="handleSubmit" ref="formElRef" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  // import {mingzu} from '/@/views/app/demo/user/nations.ts';
  //import { CollapseContainer } from '/@/components/Container/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { helloApi } from '/@/api/learningcorner/hello';
  import { HelloResultModel } from '/@/api/learningcorner/model/helloModel';
  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '姓名',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'gender',
      component: 'RadioGroup',
      label: '性别',
      colProps: {
        span: 8,
      },
      componentProps: {
          options: [
            {
              label: '男',
              value: '1',
              key: '1',
            },
            {
              label: '女',
              value: '2',
              key: '2',
            },
          ],
        },
    },
    // {
    //   field: 'Nation',
    //   component: 'Select',
    //   label: '名族',
    //   colProps: {
    //     span: 8,
    //   },
    //   defaultValue: '汉族',
    //   componentProps: {
    //       options: mingzu
    //     },
    // },
    {
      field: 'birthday',
      component: 'DatePicker',
      label: '生日',
      colProps: {
        span: 8,
      },

    },
    {
      field: 'id',
      component: 'Input',
      label: '身份证号',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'email',
      component: 'Input',
      label: '邮箱',
      colProps: {
        span: 8,
      },
      defaultValue: 'user@domain.com',
    },
     {
      field: 'qq',
      component: 'Input',
      label: 'QQ号',
      colProps: {
        span: 8,
      },
    },
     {
      field: 'mobile',
      component: 'Input',
      label: '手机号',
      colProps: {
        span: 8,
      },
    },
     {
      field: 'wechat',
      component: 'Input',
      label: '微信号',
      colProps: {
        span: 8,
      },
    },
     {
      field: 'speciality',
      component: 'InputTextArea',
      label: '特长',
      colProps: {
        span: 8,
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm },
    setup() {
      const { createMessage } = useMessage();
      const formElRef = ref(); //创建一个引用变量
      const [register] = useForm({
        schemas: schemas,
        labelWidth: 120,
        actionColOptions: {
          span: 24,
        },
      });
      return {
        register,
        formElRef,
        handleSubmit: async (values: any) => {
          try {
            console.log(values);
            let result: HelloResultModel = await submitHello();
            const formEl = formElRef.value;
            formEl.formModel.message = result.message;
            formEl.formModel.time = result.time;
            createMessage.success('click search,values:' + JSON.stringify(values));
          } catch (err) {
            console.log(err);
          }
        },
      };
    },
  });
  function submitHello() {
    return helloApi();
  }
</script>
